<template>
  <div class="body">
    <div class="info">
      <el-upload
        ref="upload"
        accept="image/jpeg,image/jpg,image/png,image/svg"
        :limit="1"
        action="''"
        :on-success="imgSuccess"
        :with-credentials="true"
        :http-request="upimg"
        ><el-avatar :size="150" :src="userimg"></el-avatar
      ></el-upload>
      <h3>用户名:{{ getusername() }}</h3>
      <h3>用户ID:{{ getuserid() }}</h3>
      <h3>邮箱:{{ useremail }}</h3>
      <el-button type="info" icon="el-icon-edit" @click="editemail = true"
        >修改邮箱</el-button
      ><br />
      <el-dialog title="修改邮箱" :visible.sync="editemail">
        <el-form :rules="editrules" :model="editForm" ref="editForm">
          <el-form-item
            label="新的邮箱"
            :label-width="formLabelWidth"
            prop="email"
          >
            <el-input
              v-model="editForm.email"
              autocomplete="off"
              type="email"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editemail = false">取 消</el-button>
          <el-button type="primary" @click="confirmEmail">确 定</el-button>
        </div>
      </el-dialog>

      <el-button type="info" icon="el-icon-edit" @click="editpwd = true"
        >修改密码</el-button
      >
      <el-dialog title="修改密码" :visible.sync="editpwd">
        <el-form :rules="editrules" :model="editForm" ref="editForm">
          <el-form-item label="密码" :label-width="formLabelWidth" prop="pwd1">
            <el-input
              v-model="editForm.pwd1"
              autocomplete="off"
              type="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item
            label="新密码"
            :label-width="formLabelWidth"
            prop="pwd2"
          >
            <el-input
              v-model="editForm.pwd2"
              autocomplete="off"
              type="password"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editpwd = false">取 消</el-button>
          <el-button type="primary" @click="confirmPwd">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userimg: sessionStorage.getItem("userimg"),
      useremail: sessionStorage.getItem("email"),
      editemail: false,
      editpwd: false,
      formLabelWidth: "200px",
      editForm: {
        email: "",
        pwd1: "",
        pwd2: "",
      },
      editrules: {
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱", trigger: "blur" },
        ],
        pwd1: [{ required: true, message: "请输入密码", trigger: "blur" }],
        pwd2: [{ required: true, message: "请输入新密码", trigger: "blur" }],
      },
    };
  },

  methods: {
    upimg(item) {
      const { file } = item;
      const formdata = new FormData();
      formdata.append("file", file);
      this.$http.patch("my/edit/icon", formdata).then((res) => {
        if (res.data.success === true) {
          this.$message.success("修改成功!");
          sessionStorage.removeItem("userimg");
          sessionStorage.setItem(
            "userimg",
            "http://8.140.135.252:8080" + res.data.iconUrl
          );
          this.userimg = sessionStorage.getItem("userimg");
          this.$store.commit("refresh");
          this.$forceUpdate();
        } else {
          this.$message.error("上传失败,请稍后重新上传!");
          console.log(res.data);
        }
        this.$refs["upload"].clearFiles();
      });
    },
    getuserid() {
      return sessionStorage.getItem("userid");
    },
    getusername() {
      return window.sessionStorage.getItem("username");
    },
    imgSuccess(res, file, fileList) {
      console.log(res);
      console.log(file);
      console.log(fileList); // 这里可以获得上传成功的相关信息
      clearFiles();
    },
    confirmEmail() {
      this.$http
        .patch("my/edit/email", {
          email: this.editForm.email,
        })
        .then((res) => {
          console.log(res.data);
          if (res.data.success === true) {
            this.$message.success("修改成功!");
            sessionStorage.removeItem("email");
            sessionStorage.setItem("email", this.editForm.email);
            this.useremail = sessionStorage.getItem("email");
            this.editForm.email = "";
            this.editemail = false;
          } else this.$message.error("修改失败,请稍后再试!");
        })
        .catch((res) => console.log(res));
    },
    confirmPwd() {
      this.$http
        .patch("my/edit/pwd", {
          oldPassword: this.editForm.pwd1,
          newPassword: this.editForm.pwd2,
        })
        .then((res) => {
          if (res.data.success === true) {
            this.$message.success("修改成功!");
            this.editForm.pwd1 = "";
            this.editForm.pwd2 = "";
            this.editpwd = false;
          } else this.$message.error("修改失败,请稍后再试!");
        })
        .catch((res) => console.log(res));
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  background-color: #fff;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
h3 {
  margin: 0;
  font-weight: normal;
  font-size: 25px;
}
.info {
  width: 60%;
  margin: 0 auto;
  line-height: 100px;
}
/deep/.el-dialog__title {
  font-size: 30px;
}
/deep/.el-form-item__label {
  font-size: 23px;
}
/deep/.el-input__inner {
  font-size: 20px;
}
/deep/.dialog-footer > .el-button {
  font-size: 17px;
  width: 110px;
}
/deep/.el-input {
  width: 65%;
}
</style>